<template>
	<div class="customerList">
		<div class="lz-header">
			<div
				style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;flex-wrap: wrap;">
				<div>
					<el-button type="primary" icon="el-icon-circle-plus-outline" :size="size" @click="customerAdd()">添加
					</el-button>
				</div>
				<div style="display: flex;flex-wrap: wrap;">
					<lz-row-col label="关键词">
						<el-input v-model="seach.roleName" placeholder="请输入关键词" :size="size"
							@keyup.enter.native="submitFormSeach"></el-input>
					</lz-row-col>
					<lz-row-col>
						<el-button type="primary" icon="el-icon-search" :size="size" style="margin:0 10px;"
							@click="submitFormSeach()">搜索</el-button>
					</lz-row-col>
				</div>
			</div>
		</div>
		<div class="r-c-center">
			<el-table :data="table.list" border :size="size" @selection-change="handleSelectionChange" :header-cell-style="headerCellStyle">
				<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
				<el-table-column prop="catalogName" label="商品分类名称"  align="center" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="catalogNo" label="商品分类编码"  align="center" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="note" label="备注" align="center" sortable show-overflow-tooltip></el-table-column>
				<el-table-column fixed="right" label="操作" width="100" align="center">
					<template slot-scope="scope">
						<el-button @click="seeEmilFn(scope.row,'修改')" type="text" :size="size">修改</el-button>
						<el-popconfirm title="你确定永久删除该数据吗？" confirm-button-type="text"
							@onConfirm="deleteEmilFn(scope.row)">
							<el-button slot="reference" type="text" :size="size" style="margin: 0 5px;">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" class="el-pagination"
				background layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 30, 40]"
				:page-size="table.page.pageSize" :total="table.page.total"></el-pagination>
		</div>
		<!-- 添加客户资料或者查看 -->
		<el-dialog v-dialogDrag :title="dialog.title" center :visible.sync="dialog.show" custom-class="lz-el-dialog lz-el-dialog-autoHight"
			width="400px"  :close-on-click-modal="false">
			<div>
				<el-form :model="dialog.ruleForm" :rules="dialog.rules" ref="ruledialog" label-width="110px"
					class="demo-ruleForm" :size="size">
					<el-form-item label="商品分类名称" prop="catalogName">
						<el-input v-model="dialog.ruleForm.catalogName" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="商品分类编码" prop="catalogNo">
						<el-input v-model="dialog.ruleForm.catalogNo" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="备注" prop="note">
						<el-input v-model="dialog.ruleForm.note" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.show=false" :size="size">取 消</el-button>
				<el-button type="primary" @click="determine" :size="size" style="margin-left: 30px;">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	let that;
	import {
		mapGetters
	} from 'vuex';
	import lzRowCol from '@/components/lzRowCol/lzRowCol';
	export default {
		components: {
			lzRowCol,
		},
		name: 'customerList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api','headerCellStyle']),
		},
		data() {
			return {
				//表格数据
				table: {
					list: [],
					multiple: [], //多选
					page: {
						pageNo: 1,
						pageSize: 10,
						total: 0
					}
				},
				//搜索
				seach: {
					roleCode: '', //编码
					roleName: '', //名称
				},
				//弹框
				dialog: {
					title: '',
					show: false,
					ruleForm:{
						catalogName:'',//商品分类名称
						catalogNo:'',//	商品分类编码
						note:'',//备注
					},
					rules:{
						catalogName: [{
							required: true,
							message: '必填项',
							trigger: 'blur'
						}],
						catalogNo: [{
							required: true,
							message: '必填项',
							trigger: 'blur'
						}],
					}
				},
			};
		},
		mounted() {
			that = this;
			//获取列表
			that.user_list()
		},
		methods: {
			//点击添加、编辑弹框确定
			determine() {
				if (that.dialog.title == '添加') {
					that.user_add()
				} else if (that.dialog.title == '修改') {
					that.user_edit()
				}
			},
			//修改
			user_edit(){
				that.GLOBAL.doPut(that.api.GLOBAL_setting_materialCatalog_edit, that.dialog.ruleForm).then(res => {
					if (res.code == 200) {
						that.$message.success(res.message)
						that.dialog.show = false;
						//获取角色列表
						that.user_list();
					}
				});
			},
			//添加
			user_add(){
				that.GLOBAL.doPost(that.api.GLOBAL_setting_materialCatalog_add, that.dialog.ruleForm).then(res => {
					if (res.code == 200) {
						that.$message.success(res.message)
						that.dialog.show = false;
						//获取角色列表
						that.user_list();
					}
				});
			},
			//查看用户详情或//修改用户详情
			seeEmilFn(row, text) {
				that.Reset()
				that.GLOBAL.doGet(that.api.GLOBAL_setting_materialCatalog_queryById, {
					id: row.id
				}).then(res => {
					if (res.code == 200) {
						that.dialog.show = true;
						that.dialog.title = text
						that.dialog.ruleForm=res.result
					}
				});
			},
			//id删除客户信息
			deleteEmilFn(row) {
				that.GLOBAL.doDelete(that.api.GLOBAL_setting_materialCatalog_delete, {
					id: row.id
				}).then(res => {
					if (res.code == 200) {
						that.$message.success(res.message)
						that.user_list()
					}
				});
			},
			//重置搜索表单
			resetForm() {
				that.seach = {
					roleCode: '', //部门角色编码
					roleName: '', //部门角色名称
				};
			},
			Reset(){
				that.ruleForm={
					catalogName:'',//商品分类名称
					catalogNo:'',//	商品分类编码
					note:'',//备注
				}
			},
			
			//搜索
			submitFormSeach() {
				//获取角色列表
				that.user_list();
			},
			//获取列表
			user_list() {
				that.dialog.show = false;
				let req = {
					showLoading: true,
					pageNo: that.table.page.pageNo,
					pageSize: that.table.page.pageSize,
					...that.seach,
				};
				that.GLOBAL.doGet(that.api.GLOBAL_setting_materialCatalog_list, req).then(res => {
					if (res.code == 200 && res.result) {
						that.table.page.total = res.result;
						that.table.list = res.result;
					} else {
						that.table.page.total = 0;
						that.table.list = [];
					}
				});
			},
			//表格多选
			handleSelectionChange(val) {
				that.table.multiple = val;
			},
			//添加操作
			customerAdd(text, event) {
				that.dialog.show = true;
				that.dialog.title = '添加'
				that.Reset()
			},
			//切换页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				that.table.page.pageNo = val;
				//获取角色列表
				that.user_list();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				that.table.page.pageSize = val;
				//获取角色列表
				that.user_list();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.customerList {
		.lz-header {}

		.el-pagination {
			float: right;
			margin: 10px 0;
		}
	}
</style>
